<template lang="html">
  <header class="soft-shadow">
    <a v-if="needBack" @click="goBack" class="header-left iconfont icon-back"></a>
    <div class="header-title">{{title}}</div>
    <div class="header-right">
      <slot name="right-btn"></slot>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    needBack: {
      type: Boolean,
      default: false,
    },
    goBackFn: {
      type: Function,
    }
  },
  methods: {
    goBack() {
      if (this.goBackFn) {
        this.goBackFn()
        return
      }
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
  @border: #D9D9D9;
  @grey: #666666;
  @blue: #078DFF;
  @red: #F40226;
  @white: #FFFFFF;
  @green: #05C911;
  @orange: #FC6932;
  @height: 0.9rem;
  header {
    width: 100%;
    height: @height;
    background-color: @white;
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    .header-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: @height;
      line-height: @height;
      font-size: .3rem;
      text-align: center;
      color: #000;
      z-index: 1;
    }
    .header-left,
    .header-right {
      position: relative;
      z-index: 2;
      float: left;
      height: 100%;
    }
    .header-left {
      margin-left: 0.3rem;
      font-size: .4rem;
      color: @grey;
      line-height: @height;
    }
    .header-right {
      float: right;
      margin-right: 0.3rem;
    }
  }
  .soft-shadow {
    box-shadow: 0 5px 10px 0 rgba(0,64,128,.05);
  }
</style>
